<template>
  <div class="fans-container">
    <el-card>
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>粉丝管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- tabs组件 -->
      <!-- 
        v-model绑定的是当前的激活页  匹配的是el-tab-pane上的name属性
        type="card" 这是一个自定义属性  控制tab的外观样式
      -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="粉丝列表" name="list">
          <!-- 列表 -->
          <div class="fans_list">
            <!-- key绑定的值不是一个有效的string或者num的时候会报错 
            当前拿到的id是大数 BigNumber类型  不是字符串也不是number
            需要使用item.id.toString()
            -->
            <div class="fans_item" v-for="item in list" :key="item.id.toString()">
              <el-avatar :size="80" :src="item.photo"></el-avatar>
              <p>{{item.name}}</p>
              <el-button type="primary" plain size="small">+关注</el-button>
            </div>
          </div>
          <!-- 分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="per_page"
            @current-change="changePage"
            :total="total"
          ></el-pagination>
        </el-tab-pane>

        <el-tab-pane label="粉丝画像" name="img">
          <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
          <div ref="main" style="width: 600px;height:400px;"></div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getFansList, getFansStatistics } from '@/api/fans'
import echarts from 'echarts'
export default {
  name: 'my-fans',
  data() {
    return {
      // tabs的当前激活选项卡的name属性值
      activeName: 'list',
      per_page: 20,//每页条数  后端做了限制  per_page must be within the range 20 - 50"
      page: 1,//当前第几页
      list: [],//粉丝列表数据
      total: 0,//当前总条数
      // 测试头像
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }
  },
  methods: {
    changePage(curPage) {
      //将curPage赋值给this.page
      this.page = curPage
      //重新发起请求
      this.hGetFansList()
    },
    //获取粉丝列表
    hGetFansList() {
      getFansList({
        page: this.page,
        per_page: this.per_page
      }).then(res => {
        console.log(res)
        this.list = res.data.data.results
        this.total = res.data.data.total_count
      })
    },
    initCahrt(ageObj) {
      //数据转换
      //需要将接口返回的age对象形式的数据转化成 以key为集合的横向数组  以value为集合的纵向数组  对象=》数组
      let x = []
      let y = []
      //es6 遍历对象的方法 使用Object.keys()遍历  (返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).)
      Object.keys(ageObj).forEach(key => {
        console.log(key)//le18 le23 le30 le40 le50 gt50
        //把数据添加到对应的x y 里面去
        //replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串  返回时替换后的新字符串
        x.push(key.replace('le', '小于').replace('gt', '大于') + '岁')
        y.push(ageObj[key])
      })
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.main)
      // 指定图表的配置项和数据
      var option = {
        xAxis: {
          data: x
        },
        yAxis: {},
        series: [{
          name: '年龄',
          type: 'bar',
          data: y
        }]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    //获取粉丝统计数据
    hGetFansStatistics() {
      //异步拿数据
      getFansStatistics().then(res => {
        console.log(res)
        //完成echarts的画图 由于画图的操作是依赖于真实数据的  所以写到成功回调中 保证能拿到数据
        this.initCahrt(res.data.data.age)
      })
    }
  },
  mounted() {
    this.hGetFansList()
    //调用实际的数据
    this.hGetFansStatistics()


  }
}
</script>
<style lang="less">
.fans_list {
  .fans_item {
    width: 120px;
    height: 170px;
    border: 1px dashed #ddd;
    text-align: center;
    padding-top: 10px;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 30px;
    p {
      margin: 10px 0;
    }
  }
}
</style>